var NavBar = (function() {

  var usrinfo = JSON.parse(localStorage.getItem('uinfo'));
  var usrType = usrinfo.userSysType.toString();

  var barTpl = {
    0: '\
    <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>\
      <ul>\
        <li :class="{active: active === 2}"><a href="noticeMgr.html"><i class="icon icon-bell"></i> <span>Notices</span></a> </li>\
        <li :class="{active: active === 1}"><a href="myinfo.html"><i class="icon icon-user"></i> <span>Information</span></a> </li>\
        <li :class="{active: active === 3}"><a href="mybills.html"><i class="icon icon-money"></i> <span>Bills</span></a> </li>\
        <li :class="{active: active === 4}"><a href="settings.html"><i class="icon icon-cogs"></i> <span>Private Settings</span></a> </li>\
      </ul>\
    </div>',
    1: '\
    <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>\
      <ul>\
        <li :class="{active: active === 2}"><a href="noticeMgr.html"><i class="icon icon-bell"></i> <span>Notices</span></a> </li>\
        <li :class="{active: active === 1}"><a href="myinfo.html"><i class="icon icon-user"></i> <span>Information</span></a> </li>\
        <li :class="{active: active === 3}"><a href="mybills.html"><i class="icon icon-money"></i> <span>Bills</span></a> </li>\
        <li :class="{active: active === 4}"><a href="settings.html"><i class="icon icon-cogs"></i> <span>Private Settings</span></a> </li>\
      </ul>\
    </div>',
    2: '\
    <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>\
      <ul>\
        <li :class="{active: active === 2}" class="submenu"> <a href="#"><i class="icon icon-bell"></i> <span>Notices</span> <span class="label label-important" style="background-color: transparent"><i class="icon icon-caret-down"></i></span></a>\
        <ul>\
          <li><a href="notice.html">Add Notice</a></li>\
          <li><a href="noticeMgr.html">Notice Management</a></li>\
        </ul>\
      </li>\
      <li :class="{active: active === 3}"><a href="studentInfo.html"><i class="icon icon-user"></i> <span>Students</span></a> </li>\
      <li :class="{active: active === 4}"><a href="settings.html"><i class="icon icon-cogs"></i> <span>Private Settings</span></a> </li>\
    	</ul>\
    </div>',
    3: '\
    <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>\
      <ul>\
        <li :class="{active: active === 0}"><a href="home.html"><i class="icon icon-table"></i> <span>Integrated Information</span></a> </li>\
        <li :class="{active: active === 1}" class="submenu"> <a href="#"><i class="icon icon-user-md"></i> <span>Users</span> <span class="label label-important" style="background-color: transparent"><i class="icon icon-caret-down"></i></span></a>\
          <ul>\
            <li><a href="addUsr.html">Add User</a></li>\
            <li><a href="usrMgr.html">User Management</a></li>\
          </ul>\
        </li>\
        <li :class="{active: active === 2}" class="submenu"> <a href="#"><i class="icon icon-bell"></i> <span>Notices</span> <span class="label label-important" style="background-color: transparent"><i class="icon icon-caret-down"></i></span></a>\
          <ul>\
            <li><a href="notice.html">Add Notice</a></li>\
            <li><a href="noticeMgr.html">Notice Management</a></li>\
          </ul>\
        </li>\
        <li :class="{active: active === 3}" class="submenu"> <a href="#"><i class="icon icon-money"></i> <span>Bills</span> <span class="label label-important" style="background-color: transparent"><i class="icon icon-caret-down"></i></span></a>\
          <ul>\
            <li><a href="bills.html"> <span>Bill Management</span></a></li>\
            <li><a href="addBills.html"> <span>Add Bill</span></a></li>\
          </ul>\
        </li>\
        <li :class="{active: active === 4}"><a href="settings.html"><i class="icon icon-cogs"></i> <span>Private Settings</span></a> </li>\
      </ul>\
    </div>'
  }
  
  var NavBar = {
    template: barTpl[usrType],
    props: {
      active: {
        default: 0
      }
    }
  };
  
  return NavBar;
})();
//  <li :class="{active: active === 1}"><a href="myinfo.html"><i class="icon icon-user"></i> <span>Information</span></a> </li>\
/*
var NavBar = (function() {

	  var usrinfo = JSON.parse(localStorage.getItem('uinfo'));
	  var usrType = usrinfo.userSysType.toString();

	  var barTpl = {
	    0: '\
	    <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>\
	      <ul>\
	        <li :class="{active: active === 2}"><a href="noticeMgr.html"><i class="icon icon-bell"></i> <span>通知</span></a> </li>\
	        <li :class="{active: active === 1}"><a href="myinfo.html"><i class="icon icon-user"></i> <span>个人信息</span></a> </li>\
	        <li :class="{active: active === 3}"><a href="mybills.html"><i class="icon icon-money"></i> <span>缴费记录</span></a> </li>\
	        <li :class="{active: active === 4}"><a href="settings.html"><i class="icon icon-cogs"></i> <span>个人设置</span></a> </li>\
	      </ul>\
	    </div>',
	    1: '\
	    <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>\
	      <ul>\
	        <li :class="{active: active === 2}"><a href="noticeMgr.html"><i class="icon icon-bell"></i> <span>通知</span></a> </li>\
	        <li :class="{active: active === 1}"><a href="myinfo.html"><i class="icon icon-user"></i> <span>个人信息</span></a> </li>\
	        <li :class="{active: active === 3}"><a href="mybills.html"><i class="icon icon-money"></i> <span>缴费记录</span></a> </li>\
	        <li :class="{active: active === 4}"><a href="settings.html"><i class="icon icon-cogs"></i> <span>个人设置</span></a> </li>\
	      </ul>\
	    </div>',
	    2: '\
	    <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>\
	      <ul>\
	      <li :class="{active: active === 2}"><a href="noticeMgr.html"><i class="icon icon-bell"></i> <span>通知</span></a> </li>\
	      <li :class="{active: active === 1}"><a href="myinfo.html"><i class="icon icon-user"></i> <span>个人信息</span></a> </li>\
	      <li :class="{active: active === 3}"><a href="studentInfo.html"><i class="icon icon-user"></i> <span>学生信息</span></a> </li>\
	      <li :class="{active: active === 4}"><a href="settings.html"><i class="icon icon-cogs"></i> <span>个人设置</span></a> </li>\
	      </ul>\
	    </div>',
	    3: '\
	    <div id="sidebar"><a href="#" class="visible-phone"><i class="icon icon-home"></i> Dashboard</a>\
	      <ul>\
	        <li :class="{active: active === 0}"><a href="home.html"><i class="icon icon-table"></i> <span>综合信息管理 Integrated Information Management</span></a> </li>\
	        <li :class="{active: active === 1}" class="submenu"> <a href="#"><i class="icon icon-user-md"></i> <span>用户</span> <span class="label label-important" style="background-color: transparent"><i class="icon icon-caret-down"></i></span></a>\
	          <ul>\
	            <li><a href="addUsr.html">添加用户</a></li>\
	            <li><a href="usrMgr.html">用户管理</a></li>\
	          </ul>\
	        </li>\
	        <li :class="{active: active === 2}" class="submenu"> <a href="#"><i class="icon icon-bell"></i> <span>通知</span> <span class="label label-important" style="background-color: transparent"><i class="icon icon-caret-down"></i></span></a>\
	          <ul>\
	            <li><a href="notice.html">添加通知</a></li>\
	            <li><a href="noticeMgr.html">通知管理</a></li>\
	          </ul>\
	        </li>\
	        <li :class="{active: active === 3}" class="submenu"> <a href="#"><i class="icon icon-money"></i> <span>账单</span> <span class="label label-important" style="background-color: transparent"><i class="icon icon-caret-down"></i></span></a>\
	          <ul>\
	            <li><a href="bills.html"> <span>账单管理</span></a></li>\
	            <li><a href="addBills.html"> <span>添加账单</span></a></li>\
	          </ul>\
	        </li>\
	        <li :class="{active: active === 4}"><a href="settings.html"><i class="icon icon-cogs"></i> <span>个人设置</span></a> </li>\
	      </ul>\
	    </div>'
	  }
	  
	  var NavBar = {
	    template: barTpl[usrType],
	    props: {
	      active: {
	        default: 0
	      }
	    }
	  };
	  
	  return NavBar;
	})();

*/